<template>
  <div>
    <div>
      <van-nav-bar title="日记" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">我的日记 </span>
        <van-tag color="#ffe1e1" text-color="#ad0000">{{len}}篇</van-tag>
      </template>
    </van-cell>
    <div>
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="item in items"
          :key="item.time"
          :title="timeFormat(item.time)"
          :name="item"
          icon="newspaper-o"
        >
          <span style="text-indent:2em;font-size:13px;">{{item.content}}</span>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div v-if="len==0">
      <van-empty description="暂无记录" />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import { NavBar } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Icon } from "vant";
import { Cell, CellGroup } from "vant";
import { Tag } from 'vant';
import { Empty } from "vant";

Vue.use(Empty);
Vue.use(Tag);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(NavBar);
export default {
  name: "Diary",
  created() {
    this.getDiary();
  },
  data() {
    return {
      activeNames: ["1"],
      items: [],
      len: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    async getDiary() {
      const { data: res } = await this.$http.get(
        "/api/find/allPermanentByType",
        {
          params: { uid: sessionStorage.getItem('uid'),type:3 }
        }
      );
      this.items = res.data;
      this.len = this.items.length;
      // console.log(this.len);
    },
    timeFormat(date) {
      // console.log(moment(date).format("YYYY-MM-DD dddd hh:mm:ss"));
      return moment(date).format("YYYY-MM-DD ddd hh:mm:ss");
    }
  }
};
</script>
<style scoped>
</style>